<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>大文件上传</title>
    <script src="/static/jq.js"></script>
    <script>
    var page = {
        init: function(){
            $("#upload").click($.proxy(this.upload, this));
        },
        
        upload: function(){
            var file = $("#file")[0].files[0],  //文件对象
                name = file.name,        //文件名
                size = file.size,        //总大小
                succeed = 0;
                  
            var shardSize = 5 * 1024 * 1024,    //以4MB为一个分片
                shardCount = Math.ceil(size / shardSize);  //总片数 
            var initform = new FormData();
            initform.append("filehash","2ac22b344a70a9668a0a190956d08607c7654fa8")
            initform.append("filesize",size)
            initform.append("filetype",name)
            console.log(name)
            $.ajax({
                url: "/file/uploadinit",
                type: "POST",
                data: initform,
                async: true,        //异步
                processData: false,  //jquery不要对form进行处理
                contentType: false,  //指定为false才能形成正确的Content-Type
                success: async function(response){
                    console.log(response)
                    let promissArray = []
                    for(let i = 0;i < shardCount;++i){
                        //计算每一片的起始与结束位置
                        var start = i * shardSize,
                            end = Math.min(size, start + shardSize);
                        //构造一个表单，FormData是HTML5新增的
                        
                        var form = new FormData();
                        form.append("f1", file.slice(start,end));  //slice方法用于切出文件的一部分
                        form.append("uploadid", response.data.uploadid);
                        // form.append("total", shardCount);  //总片数
                        form.append("index", i + 1);        //当前是第几片
                        
                        //Ajax提交
                        let p1 = 
                            $.ajax({
                                url: "/file/uploadpart",
                                type: "POST",
                                data: form,
                                async: true,        //异步
                                processData: false,  //jquery不要对form进行处理
                                contentType: false,  //指定为false才能形成正确的Content-Type
                                success: function(response){
                                //成功后的事件
                                   console.log(response)
                                }
                            });
                       
                        promissArray.push(p1) 
                    }
                    var compile = new FormData();
                    compile.append("uploadid",response.data.uploadid)
                    Promise.all(promissArray).then((result)=>{
                        console.log(result)
                        $.ajax({
                        url: "/file/compilefile",
                        type: "POST",
                        data: compile,
                        async: false,
                        processData: false,
                        contentType: false,
                        success: function(response){
                            console.log(response)
                        }
                        })
                    })
                   
                },
                error: function(){
                    alert("初始化失败")
                }
            })
            
        }
    };
    $(function(){
        page.init(); //初始化
    });
    </script>
</head>
<body>
    <input type="file" id="file" name="f1"/>
    <button id="upload">上传</button>
    <span id="output">等待中</span>
</body>
</html>